﻿@using LyyCMS.Web.Startup
@using LyyCMS.Web.Models.Articles
@using LyyCMS.Articles.Dtos
@model ArticleCategoryListViewModel

@{ ViewBag.Title = L("ArticleCategory");
    ViewBag.CurrentPageName = PageNames.ArticleCategory; }
@section scripts
    {

    <!--ztree-->
    <!--基础样式-->
    <link href="~/lib/zTree.v3/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" />
    <!--鲜艳样式-->
    @*<link href="~/lib/zTree.v3/css/awesomeStyle/awesome.css" rel="stylesheet" />*@
    <!--经典样式-->
    @*<link href="~/lib/zTree.v3/css/metroStyle/metroStyle.css" rel="stylesheet" />*@

    <link href="~/lib/jquery-treetable/css/jquery.treetable.min.css" rel="stylesheet" />
    <link href="~/lib/jquery-treetable/css/jquery.treetable.theme.default.min.css" rel="stylesheet" />
    <script src="~/lib/zTree.v3/js/jquery.ztree.core.min.js"></script>
    <script src="~/lib/zTree.v3/js/jquery.ztree.excheck.js"></script>
    <script src="~/lib/zTree.v3/js/jquery.ztree.exedit.js"></script>

    <script src="~/lib/jquery-treetable/jquery.treetable.min.js"></script>

    <environment names="Development">
        <script src="~/view-resources/Views/ArticleCategory/Index.js" asp-append-version="true"></script>

    </environment>

    <environment names="Staging,Production">
        <script src="~/view-resources/Views/ArticleCategory/Index.min.js" asp-append-version="true"></script>
    </environment>
    <script>
        $(document).ready(function () {
            $("#treeTable").treetable({
                expandable: true,
                initialState: "expanded",
                clickableNodeNames: true,//点击节点名称也打开子节点.
                indent: 30//每个分支缩进的像素数。
            })
        })
    </script>
}

<section class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <h1>@L("ArticleCategory")</h1>
            </div>
            <div class="col-sm-6">
                <a href="javascript:;" data-toggle="modal" data-target="#ArticleCategoryModal" class="btn bg-blue float-sm-right">
                    <i class="fa fa-plus-square"></i>
                    @L("Create")
                </a>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-6">
                                <!--Use for bulk actions-->
                            </div>
                            <div class="col-md-6">
                                @await Html.PartialAsync("~/Views/ArticleCategory/Index.AdvancedSearch.cshtml")
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ArticleCategoryTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>@L("Name")</th>
                                        <th>@L("Description")</th>
                                        <th>@L("OrderNum")</th>
                                        <th>@L("Parent")</th>
                                        <th style="width: 150px">@L("Actions")</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="treeTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>@L("Name")</th>
                                        <th>@L("Description")</th>
                                        <th>@L("OrderNum")</th>
                                        <th style="width: 150px">@L("Actions")</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model.TreeData)
                                    {
                                        <tr data-tt-id="@item.Id" data-tt-parent-id="@item.ParentId">
                                            <td>@item.Name</td>
                                            <td>@item.Description</td>
                                            <td>@item.OrderNum</td>
                                            <td>
                                                <a class="btn btn-default">编辑</a>
                                                <a class="btn btn-danger">删除</a>
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                               

                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-4">
                <div class="card">
                    <ul id="tree" class="ztree" style=""></ul>
                </div>

            </div>
            <div class="col-8">
                <div class="card">
                    <span id="name" name="name"></span>

                </div>
            </div>


        </div>
    </div>
</section>



@await Html.PartialAsync("~/Views/ArticleCategory/_CreateModal.cshtml", Model)

<div class="modal fade" id="ArticleCategoryEditModal" tabindex="-1" role="dialog" aria-labelledby="UserEditModalLabel" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
